<template>
	<view class="content">
		<!-- <view :class="{'one':!item.perm || permission(item.perm)}" v-for="(item,index) in funcList" :key="index" @click="goDetail(item)">
			<uni-card :shadow="false" v-if="!item.perm || permission(item.perm)">
				<text>{{item.name}}</text>
			</uni-card>
		</view> -->
		<h5 class="head-title">批量操作</h5>
		<view class="operates">
			<view :class="{'one':!item.perm || permission(item.perm)}" v-for="(item,index) in funcList" :key="index"
				@click="goDetail(item)">
				<view v-if="!item.perm || permission(item.perm)">
					<text :class="['iconfont',item.icon]"></text>
					<span>{{item.name}}</span>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		permission
	} from "@/common/permission.js";

	export default {
		data() {
			return {
				funcList: [{
						name: "升级",
						url: "/pages/batch/batchUpdate/index",
						perm: "applet:batchupgrade",
						icon: "icon-piliangshengji"
					},
					{
						name: "版本查询",
						url: "/pages/batch/versionSearch/index",
						icon: "icon-banbenchaxun"
					},
					{
						name: "系统参数",
						url: "/pages/batch/batchParam/index",
						perm: "applet:batchparam",
						icon: "icon-xitongcanshupeizhizhongxin"
					},
					{
						name: "网络参数",
						url: "/pages/batch/networkParam/index",
						perm: "applet:batchconnection",
						icon: "icon-wangluocanshu"
					},
					{
						name: "仓参数",
						url: "/pages/batch/batchBin/index",
						perm: "applet:batchbinparam",
						icon: "icon-svg-1814"
					},
				],
				permission: permission,
			}
		},
		methods: {
			goDetail(item) {
				uni.navigateTo({
					url: item.url
				})
			},
		},
	}
</script>
<style>
	page {
		background-color: #EFF0F1;
	}
</style>
<style lang="scss" scoped>
	@import "@/static/css/common";
	@import "@/static/iconfont.css";
	@import "@/static/css/main.scss";
	
	.content {
		padding: 20rpx;
		.operates {
			@include flexLayout(center, flex-start);
			flex-wrap: wrap;
			margin: 30rpx 0;

			.one {
				width: 40%;
				margin-bottom: 40rpx;
				color: #333;
				font-size: 28rpx;
				background: #ffffff;
				border-radius: 24rpx;
				margin: 0 5% 40rpx;
				padding: 40rpx 0;
				view {
					@include flexLayout(center, center);
					flex-direction: column;
				}

				.iconfont {
					font-size: 68rpx;
					margin-bottom: 20rpx;
				}
			}
		}

		.one:nth-child(1) {
			.iconfont {
				color: #6BD6FB;
			}
		}

		.one:nth-child(2) {
			.iconfont {
				color: #81ABFC;
			}
		}

		.one:nth-child(3) {
			.iconfont {
				color: #FCAA2F;
			}
		}

		.one:nth-child(4) {
			.iconfont {
				color: #FF7F7F;
			}
		}

		.one:nth-child(5) {
			.iconfont {
				color: #F94ECA;
			}
		}
	}
</style>